<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input placeholder="请输入工作内容进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                              clearable
                              @clear="initRecord"
                              style="width: 350px;margin-right: 10px" v-model="keyword"
                              @keydown.enter.native="initRecord" :disabled="showAdvanceSearchView"></el-input>
                    <el-button icon="el-icon-search" type="primary" @click="initRecord" :disabled="showAdvanceSearchView">
                        搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">
                        <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddRecordView">
                        添加工作记录
                    </el-button>
                </div>
            </div>
            <transition name="slide-fade">
                <div v-show="showAdvanceSearchView"
                     style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                    <el-row style="margin-top: 10px">
                        <el-col :span="5">
                            设备类型:
                            <el-select style="width: 170px" v-model="record.equitType" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="initRecord('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </div>
        <div style="margin-top: 10px">
            <el-table
                    size="mini"
                    :data="records"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="70">
                </el-table-column>
                <el-table-column
                        label="卫生及设备情况"
                        fixed
                        align="center"
                        width="180">
                    <el-table-column
                            prop="sanitation"
                            label="卫生情况"
                            fixed
                            align="center"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="equitState"
                            align="center"
                            label="设备状态"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        label="周次对应的时间"
                        align="center"
                        width="120">
                    <el-table-column
                            prop="weeks"
                            label="周次"
                            align="center"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="week"
                            width="120"
                            align="center"
                            label="星期">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        width="120"
                        align="center"
                        label="时间段记录">
                    <el-table-column
                            prop="startDate"
                            width="120"
                            align="center"
                            label="开始时间">
                    </el-table-column>
                    <el-table-column
                            prop="endDate"
                            width="120"
                            align="center"
                            label="完成时间">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        prop="manId"
                        width="120"
                        align="center"
                        label="人员编号">
                </el-table-column>
                <el-table-column
                        prop="content"
                        width="120"
                        align="center"
                        label="工作内容">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="120"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditRgistryView(scope.row)" style="padding: 3px" type="primary" size="normal">编辑</el-button>
                        <el-button @click="deleteRecord(scope.row)" style="padding: 3px" size="normal" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form style="margin-left: 30px" :rules="rules" ref="recordForm" :model="record" label-width="80px">
                    <el-row style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-form-item label="卫生情况" prop="sanitation">
                                <el-input class="input-style" placeholder="请输入卫生情况" v-model="record.sanitation"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 40px">
                            <el-form-item label="设备状态" prop="equitState">
                                <el-input style="width: 200px" placeholder="请输入设备状态" v-model="record.equitState"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 40px">
                            <el-form-item label="周次" prop="weeks">
                                <el-input style="width: 200px" placeholder="请输入周次" v-model="record.weeks"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="startDate">
                                <el-input placeholder="请填写开始日期" v-model="record.startDate"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 40px">
                            <el-form-item label="星期" prop="week">
                                <el-input style="width: 200px" placeholder="请填写星期" v-model="record.week"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-form-item label="人员编号" prop="manId">
                                <el-input placeholder="请输入人员编号" v-model="record.manId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 40px">
                            <el-form-item label="工作内容" prop="content">
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请填写工作内容"
                                        v-model="record.content">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddRecord">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "recordBasic",
        data() {
            return {
                fileList: [],
                searchValue: {
                    instituteId: null,
                },
                title: '',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
                showAdvanceSearchView: false,
                institutes: [],
                records: [],
                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                keyword: '',
                size: 10,
                record: {
                    sanitation: "",
                    equitState: "",
                    weeks: "",
                    startDate: '',
                    endDate: "",
                    week: '',
                    manId: '',
                    content: ''
                },
                emptyRecord: {
                    sanitation: "",
                    equitState: "",
                    weeks: "",
                    startDate: '',
                    endDate: "",
                    week: '',
                    manId: '',
                    content: ''
                },
                rules: {
                    sanitation: [{required: true, message: '请输入卫生情况', trigger: 'blur'}],
                    equitState: [{required: true, message: '请输入设备状态', trigger: 'blur'}],
                    weeks: [{required: true, message: '请输入周次', trigger: 'blur'}],
                    startDate: [{required: true, message: '请填写开始日期', trigger: 'blur'}],
                    week: [{required: true, message: '请填写星期', trigger: 'blur'}],
                    manId: [{required: true, message: '请输入人员编号', trigger: 'blur'}],
                    content: [{required: true, message: '请填写工作内容', trigger: 'blur'}],
                },
            }
        },
        mounted() {
            this.initRecord();
        },
        methods: {
            searchViewHandleNodeClick(data) {
                this.searchValue.instituteId = data.id;
                this.popVisible2 = !this.popVisible2
            },
            showEditRgistryView(data) {
                this.title = '编辑工作记录信息';
                this.record = data;
                this.dialogVisible = true;
            },
            deleteRecord(data) {
                this.$confirm('此操作将永久删除【' + data.week + '】的所有工作内容记录吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/assist/record/" + data.id).then(res => {
                        if (res) {
                            this.initRecord();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddRecord() {
                if (this.record.id) {
                    this.$refs['recordForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/assist/record/", this.record).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initRecord();
                                }
                            })
                        }
                    });
                } else {
                    this.$refs['recordForm'].validate(valid => {
                        if (valid) {
                            this.postRequest("/assist/record/", this.record).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initRecord();
                                }
                            })
                        }
                    });
                }
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initRecord();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initRecord();
            },
            showAddRecordView() {
                this.emptyRecord = ''
                this.title = '添加工作记录信息';
                this.dialogVisible = true;
            },
            initRecord(type) {
                this.loading = true;
                let url = '/assist/record/?page=' + this.page + '&size=' + this.size;
                if (type && type === 'advanced') {
                    url += "&content=" + this.keyword;
                } else {
                    url += "&content=" + this.keyword;
                    console.log(url)
                }
                this.getRequest(url).then(res => {
                    this.loading = false;
                    if (res) {
                        this.records = res.data;
                        this.total = res.total;
                    }
                });
            }
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

    #el-upload-style{
        height: 36px;
    }
    .upload-demo{
        float: left;
        margin-left: 300px;
        margin-top: 10px;
    }
</style>
